<template>
	<view class="main-admin">
		<view class="form-box shadow">
			<view class="form-group">
				<view class=" title-desc">
					※ 数据说明： 针对本次查询结果导出全部数据
				</view>
			</view>
			<view class="form-group">
				<view style="font-size:30rpx;font-weight: bold;">数据下载链接<text v-if="time"
						class="text-gray text-s margin-left-s">({{ time }} 生成)</text> </view>
				<button hover-class="button-hover" class="btn bg-admin text-white shadow" @click="copyUrl"
					:data-type="'copy'" :data-url="urll">复制</button>
			</view>
			<view class="form-group align-start" @click="copyUrl" :data-type="'copy'" :data-url="urll">
				<textarea maxlength="500" placeholder="数据文件尚未生成，点击下方按钮生成" placeholder-class="phc" v-model="urll"
					style="height:50rpx;"></textarea>
			</view>

			<block v-if="urll">
				<view class="form-group" style="padding: 15px;padding-right: 10px;">
					<view class="title-desc">
						<text user-select="true">※ <text class="text-black">链接使用说明</text>
							1. 复制以上链接地址，建议在电脑浏览器中打开链接下载数据文件
							2. 为保障信息安全，请勿外传数据链接
							3. 为了防止隐私数据泄露，请在下载后及时点击下方按钮删除
						</text>
					</view>
				</view>
			</block>
		</view>

		<button @click="bindExportTap" class="btn-admin margin-top"
			style="margin-top: 10px;">{{ urll ? '重新生成数据' : '生成数据' }}
			(Excel文件)</button>

		<button v-if="urll" @click="bindOpenTap" class="btn-admin bg-purple light">直接打开数据文件</button>

		<button v-if="urll" @click="bindDelTap" class="btn-admin margin-bottom-s bg-red light">删除数据文件</button>

		<view v-if="urll" style="margin-top: 15px;">
			<view class="title-desc text-red"><text
					class="icon-info margin-right-xs"></text>为了防止隐私数据泄露，请在下载上述文件后及时点击按钮删除
			</view>
		</view>
		<!-- 弹出框结构 状态管理 -->
		<view v-show="state" class="overlay" @click="overlayClick">

			<view class="action-modal" @click.stop>
				<div>
					<div class="action-text">温馨提示</div>
					<div class="action-text2">数据文件生成成功(
						<text style="color: #8d8d8d;font-weight: bold;">{{uconst}}</text>
						记录)，请点击「直接打开」按钮或者复制文件地址下载
					</div>
				</div>
				<view class="action-modal-content">
					<view class="action-item" @click="state = false">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		url,
		getUserCoent
	} from '@/request/api.js';

	import {
		getFormattedTime
	} from '@/request/wx.js';

	const urll = ref(null);
	const time = ref(''); // 假设的时间戳，您需要根据实际情况动态获取
	const state = ref(false);
	const uconst = ref('');

	// 点击覆盖层时的处理函数
	function overlayClick() {
		console.log("阻止点击事件冒泡到覆盖层")
		// 不进行任何操作，以阻止点击事件冒泡到覆盖层
	}

	const copyUrl = () => {
		// 复制链接的逻辑
		console.log("复制链接:" + urll.value);
		if (urll.value === null) {
			console.log("链接为空");
			uni.showToast({
				title: '链接为空'
			});
			return;
		}
		uni.setClipboardData({
			data: urll.value,
			success: () => {
				uni.showToast({
					title: '已复制到剪贴板'
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败'
				});
			}
		});
	};

	const bindExportTap = () => {
		time.value = getFormattedTime();
		// console.log(getFormattedTime())
		// 重新生成数据的逻辑
		// 调用后端接口下载文件
		function downloadFile(id) {
			return new Promise((resolve, reject) => {
				wx.downloadFile({
					url: url() + `User/usergetid?id=${id}`, // 替换为实际的URL
					success(res) {
						if (res.statusCode === 200) {
							resolve(res);
						} else {
							reject('下载失败，状态码：' + res.statusCode);
						}
					},
					fail(err) {
						reject('下载失败：' + err.errMsg);
					}
				});
			});
		}

		// 使用下载的文件
		downloadFile(2).then((res) => {
			console.log(res); // 检查 res 对象是否包含 tempFilePath
			urll.value = res.tempFilePath;
			getUserCoent().then((res) => {
				console.log(res.data.data);
				uconst.value = res.data.data;
				state.value = true;
			})
		}).catch((error) => {
			console.error('处理文件时出错:', error);
		});
	};

	const bindOpenTap = () => {
		// 直接打开数据文件的逻辑
		console.log(urll.value);
		if (urll.value) {
			uni.showToast({
				title: '打开文档'
			});
			wx.openDocument({
				filePath: urll.value, // 从下载API获取的临时文件路径
				success(res) {
					console.log(res)
					console.log('打开文档成功');
				},
				fail(err) {
					console.error('打开文档失败:', err);
				}
			});
		} else {
			console.error('tempFilePath is undefined');
		}
	};

	const bindDelTap = () => {
		// 删除数据文件的逻辑
		urll.value = '';
		time.value = '';
	};
</script>

<style scoped>
	::v-deep textarea {
		line-height: 1.5;
	}

	.action-text2,
	.action-text {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
		font-size: 17px;
	}

	.action-text2 {
		color: #737373;
		line-height: 1.5;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		background-color: rgba(0, 0, 0, 0.1);
		z-index: 9999;
	}

	.action-modal {
		background-color: #fff;
		border-radius: 10px;
		width: 70%;
		max-width: 300px;
		box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
		position: absolute;
		bottom: 50%;
		left: 50%;
		transform: translate(-50%, 50%);
		/* 同时实现水平和垂直居中 */
		z-index: 10000;
		padding: 25px;
	}

	.action-modal-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 100%;
		width: 100%;
	}

	.action-item {
		padding: 12px;
		margin-top: 10px;
		width: 55%;
		text-align: center;
		color: white;
		background-color: #00c469;
		border-radius: 6px;
		cursor: pointer;
	}

	.action-item:hover {
		background-color: #33d087;
	}

	.main-admin {
		padding: 15px 12px;
		background-color: #fff;
		border-radius: 8px;
		/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
	}

	.form-box {
		/* border: 1px solid #ebebeb; */
		border-radius: 4px;
		margin-bottom: 20px;
		/* padding: 20px; */
	}

	.form-group {
		padding: 15px;
		padding-right: 10px;
		border-bottom: 1px solid #ebebeb;
	}

	.align-start {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.title-desc {
		color: #888;
		font-size: 15px;
	}

	.title {
		font-size: 16px;
		color: #333;
	}

	.text-gray {
		margin-left: 10px;
		color: #aaa;
		/* font-weight: 100; */
		font-size: 13px;
	}

	.text-black {
		color: #000;
	}

	.text-red {
		color: #f56c6c;
	}

	.icon-info {
		color: #f56c6c;
	}

	.btn {
		width: 196px;
		/* padding: 10px 20px; */
		border-radius: 6px;
		border: none;
		outline: none;
		cursor: pointer;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		transition: all 0.3s ease;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* display: inline-flex; */
		align-items: center;
		justify-content: center;
		margin-top: 12px;
	}

	.btn:hover {
		opacity: 0.9;
		/* 鼠标悬停时透明度变化 */
		transform: translateY(-2px);
		/* 鼠标悬停时向上移动 */
	}

	.btn:active {
		transform: translateY(2px);
		/* 点击时向下移动 */
	}

	.bg-admin {
		background-color: #409eff;
		/* 蓝色背景 */
		box-shadow: 0 4px 6px rgba(64, 158, 255, 0.3);
		/* 蓝色阴影 */
		color: #ffffff;
		/* 白色文字 */
	}

	.bg-purple {
		background-color: #7c4dff;
		/* 紫色背景 */
		box-shadow: 0 4px 6px rgba(124, 77, 255, 0.3);
		/* 紫色阴影 */
		color: #ffffff;
		/* 白色文字 */
		margin-top: 5px;
	}

	.bg-red {
		background-color: #f56c6c;
		/* 红色背景 */
		box-shadow: 0 4px 6px rgba(245, 108, 108, 0.3);
		/* 红色阴影 */
		color: #ffffff;
		/* 白色文字 */
		margin-top: 5px;
	}

	.light {
		color: #fff;
		/* 保持白色文字 */
	}

	.shadow {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	.button-hover {
		background-color: #66b1ff;
	}

	.phc::placeholder {
		color: #aaa;
	}
</style>